import React, { useEffect, useState } from 'react';

interface SimplePagePreloaderProps {
  children: React.ReactNode;
}

const SimplePagePreloader: React.FC<SimplePagePreloaderProps> = ({ children }) => {
  const [isPreloading, setIsPreloading] = useState(true);
  const [preloadProgress, setPreloadProgress] = useState(0);

  useEffect(() => {
    // 模拟页面预加载过程
    const preloadPages = async () => {
      const totalPages = 10; // 假设有10个页面需要预加载
      let loadedCount = 0;

      const loadPage = (index: number) => {
        return new Promise<void>((resolve) => {
          setTimeout(() => {
            loadedCount++;
            setPreloadProgress(Math.round((loadedCount / totalPages) * 100));
            resolve();
          }, index * 100); // 每个页面间隔100ms
        });
      };

      // 并行加载所有页面
      const promises = Array.from({ length: totalPages }, (_, index) => loadPage(index));
      await Promise.all(promises);

      // 预加载完成
      setTimeout(() => {
        setIsPreloading(false);
      }, 300);
    };

    preloadPages();
  }, []);

  // 如果正在预加载，显示进度界面
  if (isPreloading) {
    return (
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        zIndex: 9999
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '24px', marginBottom: '20px', fontWeight: 'bold' }}>
            LinkMate
          </div>
          <div style={{ fontSize: '16px', marginBottom: '30px' }}>
            正在预加载页面...
          </div>
          
          {/* 进度条 */}
          <div style={{
            width: '300px',
            height: '6px',
            background: 'rgba(255, 255, 255, 0.3)',
            borderRadius: '3px',
            overflow: 'hidden',
            marginBottom: '20px'
          }}>
            <div style={{
              width: `${preloadProgress}%`,
              height: '100%',
              background: 'white',
              borderRadius: '3px',
              transition: 'width 0.3s ease'
            }} />
          </div>
          
          <div style={{ fontSize: '14px', opacity: 0.8 }}>
            {preloadProgress}% 完成
          </div>
          
          <div style={{ fontSize: '12px', marginTop: '20px', opacity: 0.6 }}>
            正在优化您的体验...
          </div>
        </div>
      </div>
    );
  }

  return <>{children}</>;
};

export default SimplePagePreloader;
